layui.use(['element', 'util'], function () {
    var $ = layui.jquery
        , element = layui.element,//Tab的切换功能，切换事件监听等，需要依赖element模块
        util = layui.util,
        layer = layui.layer;

    //固定块
    util.fixbar({
        bar1: true
        , bar2: true
        , css: {right: 50, bottom: 100}
        , bgcolor: '#393D49'
        , click: function (type) {
            if (type === 'bar1') {
                layer.msg('icon是可以随便换的')
            } else if (type === 'bar2') {
                layer.msg('两个bar都可以设定是否开启')
            }
        }
    });

    // 监听菜单栏的菜单点击事件
    $('.blog-menu').on('click', function () {
        var othis = $(this), type = othis.data('type');
        active[type] ? active[type].call(this, othis) : '';
    });

    //触发事件
    var active = {
        tabAdd: function () {
            var title = '新选项' + (Math.random() * 1000 | 0);
            //新增一个Tab项
            element.tabAdd('tabs', {
                title:  title//用于演示
                , content: '内容' + (Math.random() * 1000 | 0)
                , id: title //实际使用一般是规定好的id，这里以时间戳模拟下
            })
            element.tabChange('demo', title.toString());
        }
        , tabDelete: function (othis) {
            //删除指定Tab项
            element.tabDelete('demo', '44'); //删除：“商品管理”
            othis.addClass('layui-btn-disabled');
        }
        , tabChange: function () {
            //切换到指定Tab项
            element.tabChange('demo', '22'); //切换到：用户管理
        }
    };

    // 消息盒子里的左tab
    $('.msg-tab-left').on('click', function () {
        // 给左tab添加选中样式
        $(this).addClass('msg-tab-active-left');
        // 移除右tab的选中样式
        $('.msg-tab-right').removeClass('msg-tab-active-right');
    });

    // 消息盒子里的右tab
    $('.msg-tab-right').on('click', function () {
        // 给右tab添加选中样式
        $(this).addClass('msg-tab-active-right');
        // 移除左tab的选中样式
        $('.msg-tab-left').removeClass('msg-tab-active-left');
    });
});